<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>

    <!-- 引入核心库 -->
    <script type="text/javascript" src="./React-js/16.8/react.development.js"></script>
    <!-- 用于支持react操作DOM -->
    <script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script>
    <!-- 用于将jsx转换为js -->
    <script text="text/javascript" src="./React-js/16.8/babel.min.js"></script>

    <script type="text/babel">
        /* 
        1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
            1.constructor()
            2.componentWillMount()
            3.render()
            4.componentDidMount()
        2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
            1.shouldComponentUpdate()
            2.componentWillUpdate()
            3.render()
            4.componentDidUpdate()
        3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
            1.componentWillUnmount()
         */
        class Count extends React.Component {
            constructor(props) {
                console.log('constructor--构造器');
                super(props)
                // 初始化状态
                this.state = { count: 0 }
            }
            add = () => {
                this.setState({ count: this.state.count + 1 })
            }
            force = () => {
                // 不受shouldComponentUpdate影响
                this.forceUpdate()
            }
            // 卸载组件
            unload = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }


            // 组件初始化挂载前
            componentWillMount() {
                console.log('componentWillMount-组件初始化挂载前');
            }
            // 组件初始化挂载完
            componentDidMount() {
                console.log('componentDidMount');
            }

            // 组件卸载前
            componentWillUnmount() {
                console.log('componentWillUnmount');
            }

            /* 更新流程 */
            // 不写默认返回true。控制组件更新，需要返回true才能执行后面更新操作
            shouldComponentUpdate() {
                console.log('shouldComponentUpdate----------控制组件更新阀门');
                return true
            }
            // 组件更新前
            componentWillUpdate() {
                console.log('componentWillUpdate------------组件更新前');
            }
            // 组件更新完
            componentDidUpdate() {
                console.log('componentDidUpdate-------------组件更新完');
            }

            render() {
                console.log('render');
                const { count } = this.state
                return (
                    <div>
                        <h2>当前的求和为：{count}</h2>
                        <button onClick={this.add}>点击+1</button>
                        <button onClick={this.force}>强制更新</button>
                        <button onClick={this.unload}>卸载</button>
                    </div>
                )
            }
        }
        // ReactDOM.render(<Count />, document.querySelector('#test'))










        // 父组件
        class A extends React.Component {
            state = { carName: '奔驰' }
            chang = () => {
                this.setState({ carName: '牛马' })
            }
            render() {
                return (
                    <div>
                        <h2>A</h2>
                        <button onClick={this.chang}>换车</button>
                        <B carName={this.state.carName}></B>
                    </div>
                )
            }
        }
        // 子组件
        class B extends React.Component {
            // 第一次不会执行，只有更新后才执行
            componentWillReceiveProps(props) {
                console.log('componentWillReceivProps', props);
            }

            /* 更新流程 */
            // 不写默认返回true。控制组件更新，需要返回true才能执行后面更新操作
            shouldComponentUpdate() {
                console.log('shouldComponentUpdate----------控制组件更新阀门');
                return true
            }
            // 组件更新前
            componentWillUpdate() {
                console.log('componentWillUpdate------------组件更新前');
            }
            // 组件更新完
            componentDidUpdate() {
                console.log('componentDidUpdate-------------组件更新完');
            }
            render() {
                console.log('render');
                return (
                    <div>
                        <h2>B---{this.props.carName}</h2>
                        <div></div>
                    </div>
                )
            }
        }

        
       
        ReactDOM.render(<A />, document.querySelector('#test'))
    </script>
</body>

</html>